import React from 'react';
import { Button, Modal, Form, Input, Radio,Alert,Tooltip,Icon,Table } from 'antd';
const FormItem = Form.Item;
const { TextArea } = Input;
const confirm = Modal.confirm;


// 弹窗
// 确认收款
const GetCreateForm = Form.create()(
    class extends React.Component {
        render() {
        const { visible, onCancel, onCreate, form } = this.props;
        const { getFieldDecorator } = form;
        return (
            <Modal
            visible={visible}
            title="确认收款"
            okText="我已收款"
            onCancel={onCancel}
            onOk={onCreate}
            centered
            >
                <Form>
                    <FormItem label="收款金额"  labelCol={{ span: 6 }} wrapperCol={{ span: 15 }} extra="请填入您该笔交易收到的全部货款金额">
                    {getFieldDecorator('pay', {
                        rules: [{ required: true, message: '必填项不能为空' }],
                    })(
                        <Input />
                    )}
                    </FormItem>
                </Form>
            </Modal>
        );
        }
    }
);
  
class GetCreateModal extends React.Component {
    constructor(props){
        super(props)
        this.state={
            visible: false,
        }
    }
    showModal = () => {
        this.setState({ visible: true });
    }

    handleCancel = () => {
        this.setState({ visible: false });
    }

    handleCreate = () => {
        const form = this.formRef.props.form;
        form.validateFields((err, values) => {
        if (err) {
            return;
        }

        console.log('Received values of form: ', values);
        form.resetFields();
        this.setState({ visible: false });
        });
    }

    saveFormRef = (formRef) => {
        this.formRef = formRef;
    }

    render() {
        return (
        <div>
            <Button type="primary" block onClick={this.showModal}>确认收款</Button>
            <GetCreateForm
                wrappedComponentRef={this.saveFormRef}
                visible={this.state.visible}
                onCancel={this.handleCancel}
                onCreate={this.handleCreate}
            />
        </div>
        );
    }
}

// 确认发货
const DeliverCreateForm = Form.create()(
    class extends React.Component {
        render() {
        const { visible, onCancel, onCreate, form } = this.props;
        const { getFieldDecorator } = form;
        return (
            <Modal
            visible={visible}
            title="确认发货"
            okText="我已发货"
            onCancel={onCancel}
            onOk={onCreate}
            centered
            >
                <Form>
                    <FormItem label="实发数量" labelCol={{ span: 6 }} wrapperCol={{ span: 15 }}>
                        {getFieldDecorator('num')(<Input />)}
                    </FormItem>
                    <FormItem label="实发重量" labelCol={{ span: 6 }} wrapperCol={{ span: 15 }}>
                        {getFieldDecorator('weight')(<Input />)}
                    </FormItem>
                    <FormItem label="备注" labelCol={{ span: 6 }} wrapperCol={{ span: 15 }}>
                        {getFieldDecorator('note')(<TextArea autosize={{ minRows: 2, maxRows: 6 }}/>)}
                    </FormItem>
                </Form>
            </Modal>
        );
        }
    }
);
  
class DeliverCreateModal extends React.Component {
    constructor(props){
        super(props)
        this.state={
            visible: false,
        }
    }
    showModal = () => {
        this.setState({ visible: true });
    }

    handleCancel = () => {
        this.setState({ visible: false });
    }

    handleCreate = () => {
        const form = this.formRef.props.form;
        form.validateFields((err, values) => {
        if (err) {
            return;
        }

        console.log('Received values of form: ', values);
        form.resetFields();
        this.setState({ visible: false });
        });
    }

    saveFormRef = (formRef) => {
        this.formRef = formRef;
    }

    render() {
        return (
        <div>
            <Button type="primary" block onClick={this.showModal}>确认发货</Button>
            <DeliverCreateForm
                wrappedComponentRef={this.saveFormRef}
                visible={this.state.visible}
                onCancel={this.handleCancel}
                onCreate={this.handleCreate}
            />
        </div>
        );
    }
}

// 确认开票
const TicketCreateForm = Form.create()(
    class extends React.Component {
        render() {
        const { visible, onCancel, onCreate, form } = this.props;
        const { getFieldDecorator } = form;
        return (
            <Modal
            visible={visible}
            title="确认发票"
            okText="我已开票"
            onCancel={onCancel}
            onOk={onCreate}
            centered
            >
                <Form>
                    <FormItem label="发票抬头类型" labelCol={{ span: 6 }} wrapperCol={{ span: 15 }}>
                        {getFieldDecorator('type', {
                            initialValue: 'public',
                        })(
                            <Radio.Group>
                                <Radio value="public">企业</Radio>
                                <Radio value="private">个人</Radio>
                            </Radio.Group>
                        )}
                    </FormItem>
                    <FormItem label="快递公司" labelCol={{ span: 6 }} wrapperCol={{ span: 15 }}>
                        {getFieldDecorator('company')(<Input />)}
                    </FormItem>
                    <FormItem label="快递单号" labelCol={{ span: 6 }} wrapperCol={{ span: 15 }}>
                        {getFieldDecorator('number')(<Input />)}
                    </FormItem>
                </Form>
            </Modal>
        );
        }
    }
);
  
class TicketCreateModal extends React.Component {
    constructor(props){
        super(props)
        this.state={
            visible: false,
        }
    }
    showModal = () => {
        this.setState({ visible: true });
    }

    handleCancel = () => {
        this.setState({ visible: false });
    }

    handleCreate = () => {
        const form = this.formRef.props.form;
        form.validateFields((err, values) => {
        if (err) {
            return;
        }

        console.log('Received values of form: ', values);
        form.resetFields();
        this.setState({ visible: false });
        });
    }

    saveFormRef = (formRef) => {
        this.formRef = formRef;
    }

    render() {
        return (
        <div style={{position:'relative'}}>
            <Button type="primary" block onClick={this.showModal}>确认开票</Button>
            <Tooltip
                title='111'
            >
                <Icon type="info-circle-o"  style={{position:'absolute',top: '9px',right: '-25px'}}/>
            </Tooltip>
            <TicketCreateForm
                wrappedComponentRef={this.saveFormRef}
                visible={this.state.visible}
                onCancel={this.handleCancel}
                onCreate={this.handleCreate}
            />
        </div>
        );
    }
}

// 确认完成交易
function SureCreateModal() {
    const modalConfirm=()=>{
        confirm({
            title: '确定要启用该渠道吗？',
            centered:true,
          //   className:'confirm',
            onOk() {
              console.log('OK');
            },
            onCancel() {
              console.log('Cancel');
            },
        });
    }
    return(
        <Button type="primary" block onClick={modalConfirm}>确认完成交易</Button>
    )
}
// 关闭订单
const CloseCreateForm = Form.create()(
    class extends React.Component {
        render() {
        const { visible, onCancel, onCreate, form } = this.props;
        const { getFieldDecorator } = form;
        return (
            <Modal
            centered
            visible={visible}
            title="关闭订单"
            okText="确认"
            onCancel={onCancel}
            onOk={onCreate}
            >
                <Form>
                    <Alert message="确认该笔交易未完成，关闭订单？" type="warning" showIcon style={{marginBottom:'15px'}}/>
                    <FormItem label="未完成原因" labelCol={{ span: 6 }} wrapperCol={{ span: 15 }}>
                        {getFieldDecorator('label')(<Input placeholder="请输入交易未完成原因"/>)}
                    </FormItem>
                </Form>
            </Modal>
        );
        }
    }
);
  
class CloseCreateModal extends React.Component {
    constructor(props){
        super(props)
        this.state={
            visible: false,
        }
    }
    showModal = () => {
        this.setState({ visible: true });
    }

    handleCancel = () => {
        this.setState({ visible: false });
    }

    handleCreate = () => {
        const form = this.formRef.props.form;
        form.validateFields((err, values) => {
        if (err) {
            return;
        }

        console.log('Received values of form: ', values);
        form.resetFields();
        this.setState({ visible: false });
        });
    }

    saveFormRef = (formRef) => {
        this.formRef = formRef;
    }

    render() {
        return (
            <div>
                <Button  block onClick={this.showModal}>关闭订单</Button>
                <CloseCreateForm
                    wrappedComponentRef={this.saveFormRef}
                    visible={this.state.visible}
                    onCancel={this.handleCancel}
                    onCreate={this.handleCreate}
                />
            </div>
        );
    }
}

// 查看订单记录

const dataSource = [{
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号'
  }, {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号'
  }];
  
  const columns = [{
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  }, {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  }, {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  }];
class ViewOrderRecordModal extends React.Component {
    state = { visible: false }
  
    showModal = () => {
      this.setState({
        visible: true,
      });
    }
  
    handleOk = (e) => {
      console.log(e);
      this.setState({
        visible: false,
      });
    }
  
    handleCancel = (e) => {
      console.log(e);
      this.setState({
        visible: false,
      });
    }
  
    render() {
      return (
        <div>
          <a href="javascript:;" onClick={this.showModal}>
            查看订单记录
          </a>
          <Modal
            centered
            title="订单记录"
            visible={this.state.visible}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
            footer={null} //关闭底部按钮
            width={700}
          >
             <Table dataSource={dataSource} columns={columns} />
          </Modal>
        </div>
      );
    }
}


export {GetCreateModal,DeliverCreateModal,TicketCreateModal,SureCreateModal,CloseCreateModal,ViewOrderRecordModal};